<template>
	<view>
		<cu-custom bgColor="bg-gradual-green" :isBack="true">
			<view slot="backText">返回</view>
			<view slot="content">活动直播</view>
		</cu-custom>
		<view>
			<live-pusher id='livePusher' ref="livePusher" class="livePusher" url="https://domain/push_stream" mode="SD"
				:muted="true" :enable-camera="true" :auto-focus="true" :beauty="1" whiteness="2" aspect="16:9"
				orientation="horizontal" @statechange="statechange" @netstatus="netstatus" @error="error"></live-pusher>
		</view>
		<view class="cu-bar bg-white">
			<view class="action sub-title">
				<text class="text-xl text-bold text-green">活动聊天室</text>
				<text class="bg-green" style="width:4rem"></text>
			</view>
		</view>
		<scroll-view scroll-y
		:style="'height: calc(70vh - 200rpx - env(safe-area-inset-bottom) / 2 - ' + CustomBar + 'px)'">
			<view class="cu-chat" v-for="(item, index) in chatList" :key="index">
				<view v-if="item.self&&!item.isImg" class="cu-item self">
					<view class="main">
						<view class="content bg-green shadow">
							<text>{{item.content}}</text>
						</view>
					</view>
					<view class="cu-avatar radius" :style="'background-image:url(' + item.avatar + ');'">
					</view>
					<view class="date">{{item.time}}</view>
				</view>
				<view v-if="item.self&&item.isImg" class="cu-item self">
					<view class="main">
						<image :src="item.content" class="radius" mode="widthFix"></image>
					</view>
					<view class="cu-avatar radius" :style="'background-image:url(' + item.avatar + ');'">
					</view>
					<view class="date">{{item.time}}</view>
				</view>
				<view v-if="!item.self&&!item.isImg" class="cu-item">
					<view class="cu-avatar radius" :style="'background-image:url(' + item.avatar + ');'">
					</view>
					<view class="main">
						<view class="content shadow">
							<text>{{item.content}}</text>
						</view>
					</view>
					<view class="date ">{{item.time}}</view>
				</view>
				<view v-if="!item.self&&item.isImg" class="cu-item">
					<view class="cu-avatar radius" :style="'background-image:url(' + item.avatar + ');'">
					</view>
					<view class="main">
						<image :src="item.content" class="radius" mode="widthFix"></image>
					</view>
					<view class="date">{{item.time}}</view>
				</view>
			</view>
			<view class="cu-bar foot input" :class="inputBottom!=0?'cur':''" :style="'bottom: ' + inputBottom + 'px'">
				<view class="action">
					<text class="text-grey">评论:</text>
				</view>
				<input class="solid-bottom" @focus="inputFocus" @blur="inputBlur" :adjust-position="false"
					:focus="false" maxlength="300" cursor-spacing="10" v-model="comment"></input>
				<view class="action">
					<text class="cuIcon-emojifill text-grey"></text>
					<text class="cuIcon-add text-gray" @click="sendImg"></text>
				</view>
				<button class="cu-btn bg-green shadow" @click="sendComment">发送</button>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				url: this.url,
				inputBottom: 0,
				comment: '',
				chatList: [{
					avatar: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg',
					content: '这次活动真的非常好!',
					isImg: false,
					self: false,
					time: '12:12'
				}, {
					avatar: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big143004.jpg',
					content: '这次活动真的非常好吗, 发点图片',
					isImg: false,
					self: true,
					time: '12:45'
				}, {
					avatar: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg',
					content: 'https://tupian.qqw21.com/article/UploadPic/2012-8/201287221234868.jpg',
					isImg: true,
					self: false,
					time: '12:50'
				}]
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			inputFocus(e) {
				this.inputBottom = e.detail.height
			},
			inputBlur(e) {
				this.inputBottom = 0
			},
			inputComment(event) {
				this.comment = event.detail.value
			},
			sendImg() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择或从拍照选择
					success: (res) => {
						const date = new Date()
						this.chatList.push({
							avatar: this.url + '/image/' + this.userInfo.avatar,
							content: res.tempFilePaths[0],
							isImg: true,
							self: true,
							time: date.getHours() + ':' + date.getMinutes()
						})
					}
				})
			},
			sendComment() {
				// if (this.login) {
				if (this.comment != '') {
					const date = new Date()
					this.chatList.push({
						avatar: this.url + '/image/' + this.userInfo.avatar,
						content: this.comment,
						isImg: false,
						self: true,
						time: date.getHours() + ':' + date.getMinutes()
					})
					this.comment = ''
				} else {
					uni.showToast({
						title: '请输入内容',
						icon: 'none',
						duration: 1500
					})
				}
				// } else {
				// 	uni.navigateTo({
				// 		url: '/pages/login/login'
				// 	})
				// }
			}
		}
	}
</script>

<style>
	page {
		padding-bottom: 100upx;
	}

	.livePusher {
		/* width: 100vw; */
		height: 30vh;
	}
</style>
